<template>
    <div>
        <el-form :inline="true">
            <el-form-item label="分类名称">
                <el-input v-model="materialName" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="status" placeholder="选择是否启用">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </el-form>

        <el-table :data="tableData" style="width: 100%" row-key="materialId" lazy
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="name" label="分类" width="180">
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="180">
            </el-table-column>
            <el-table-column prop="address" label="物料产品">
            </el-table-column>
            <el-table-column prop="isEnabled" label="是否启用">
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间">
            </el-table-column>
            <el-table-column prop="operate" label="操作" width="300">
                <el-button type="text" size="mini" v-perm:prod:masterData:classification:insert="Insert">添加</el-button>
                <el-button type="text" size="mini" v-perm:prod:masterData:classification:update="Update">修改</el-button>
                <el-button type="text" size="mini">删除</el-button>
            </el-table-column>
        </el-table>

        <el-dialog :destroy-on-close="true" :title="title" v-model="visible">
            <router-view :data="data" @close="close"></router-view>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import router from '@/router';
import request from '@/api/request';
let visible = ref(false)
let title = ref("");
let data = ref({});
let tableData = ref([]);

let Insert = (menu) => {
    console.log(menu)
    visible.value = true;
    router.push(menu.path)
}


let Update = (tableData) => {
    console.log(tableData)
    visible.value = true;
    router.push(tableData.path)
}

let close = () => {
    visible.value = false;
    loadData();
}

// 初始化状态（设置默认值）  
const materialName = ref('');
const status = ref('');
let loadData = () => {
    request({
        url: '/api/classification/find',
        method: 'get',
        params: {
            materialName: materialName.value,
            status: status.value ? status.value : ""
        }
        // ,
        // headers: "Content-Type: application/json"
    }).then(resp => {
        console.log(resp.data)
        tableData.value = resp.data
    })
}

loadData();


// 示例订单数据  
// const tableData = ref([
//     {
//         id: "1",
//         name: '物料产品分类',
//         type: '分类',
//         address: '物料',
//         isEnabled: '是',
//         sort: '1',
//         createdTime: '2024-06-25 16:58:40',
//         showChildren: true,
//         children: [
//             {
//                 id: "2",
//                 name: "物料",
//                 type: '分类',
//                 address: '物料',
//                 isEnabled: '是',
//                 sort: '2',
//                 createdTime: '2024-06-25 16:58:40',
//                 children: [
//                     {
//                         id: "4",
//                         name: "原材料",
//                         type: '分类',
//                         address: '物料',
//                         isEnabled: '是',
//                         sort: '1',
//                         createdTime: '2024-06-25 16:58:40',
//                     }, {
//                         id: "5",
//                         name: "辅料",
//                         address: '物料',
//                         type: '分类',
//                         isEnabled: '是',
//                         sort: '2',
//                         createdTime: '2024-06-25 16:58:40',
//                     },
//                 ]

//             }, {
//                 id: "3",
//                 name: "产品",
//                 type: '分类',
//                 address: '产品',
//                 isEnabled: '是',
//                 sort: '3',
//                 createdTime: '2024-06-25 16:58:40',
//                 children: [
//                     {
//                         id: "6",
//                         name: "成品",
//                         type: '分类',
//                         address: '产品',
//                         isEnabled: '是',
//                         sort: '1',
//                         createdTime: '2024-06-25 16:58:40',
//                     }, {
//                         id: "7",
//                         name: "半成品",
//                         address: '产品',
//                         type: '分类',
//                         isEnabled: '是',
//                         sort: '2',
//                         createdTime: '2024-06-25 16:58:40',
//                     },
//                 ]

//             }],



//     },

// ]);






const search = () => {
    console.log('搜索:', orderNo.value, orderType.value);
    // 搜索逻辑  
};  
</script>

<style lang='scss' scoped>
/* 样式部分，可以根据需求添加 */
.el-select {
    width: 150px;
}
</style>